<template>
	<view class="page" style="padding-bottom: 120px;">
		<view class="">
			<scroll-view scroll-y="true" class="bodyScroll">
				<u-checkbox-group @change="checkboxGroupChange">
					<view class="cartList">
						<view class="item u-flex p12" v-for="(i,index) in list" :key="index">
							<view class="icheckbox">
								<u-checkbox @change="checkboxChange" :name="i.id" size="28" icon-size="20"
									label-size="20" v-model="i.selected" shape="circle" active-color="red"></u-checkbox>
							</view>
							<view class="u-f1 u-flex" style="align-items: flex-start;" v-if="i.spu">
								<view>
									<image class="w100 h100" :src="i.sku.picUrl || i.spu.picUrl" mode="aspectFill"></image>
								</view>
								<view class="u-f1 pl12">
									<view class="fz14 u-font-bold">
										{{i.spu.name}}
									</view>
									<view class="c8 mt10" v-if="i.sku">{{i.sku.skuName}}</view>
									<view class="u-flex u-f-jsb mt30">
										<view class="price" v-if="i.sku">
											￥<text class="b">{{Number(i.sku.price).toFixed(2)}}</text>
										</view>
										<view class="count">
											<u-number-box @typeClick="numberClick($event,i)"
												@change="countChange($event,i)" size="24" v-model="i.count" :min="0"
												:max="999"></u-number-box>
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
				</u-checkbox-group>
			</scroll-view>
		</view>
		<view class="u-flex u-f-jsb pt10 pl15 pr15 cart-fixed bg-white">
			<view class="lef">
				<view class="checkbox">
					<u-checkbox @change="toggleSelectAll" size="28" icon-size="20" label-size="28"
						v-model="selectAll" shape="circle" active-color="red" name="全选">全选</u-checkbox>
				</view>
			</view>
			<view class="u-flex u-f-jsb ">
				<view class="fz14">
					合计：<text class="u-font-bold" style="color: #FE3307;">￥{{total}}</text>
				</view>
				<view class="btn-booking" @click="toBooking">
					结算
				</view>
			</view>
		
		</view>
		<u-tabbar active-color="#70B52C" @change="tabbarChange" v-model="curTab" :list="tabbarList"
			:mid-button="true"></u-tabbar>
		<u-modal v-model="showDel" @confirm="sureDel" :content="content" :showCancelButton="true"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				selectAll: false,
				showDel: false,
				content: '确认删除该商品吗',
				list: [],
				info: {},
				total: 0,
				curTab: 2,
				curId: '',
				checkList: []
			}
		},
		computed: {
			tabbarList() {
				return this.$store.state.tabbarList || '';
			},
		},
		onShow() {

			this.$api.productInfo({
				id: 13
			}, res => {
				if (res.code == 200) {
					this.info = res.data
				}
			})
			this.initData();
		},
		methods: {
			initData() {

				this.list = []
				this.total = 0
				this.checkList = []
				this.getList();
			},
			sureDel() {

				this.$api.cartDelete({
					ids: this.curId,
				}, res => {
					if (res.code == 200) {

						this.$common.successToShow('删除成功', ress => {
							this.initData();
						})
					} else {
						this.$common.errorToShow(res.msg)
					}
				})
			},
			numberClick(e, item) {
				if (e.type == "minus") {
					this.showDel = true
					this.curId = item.id
					// this.$common.modelShow('提示', '确认删除该商品吗?', () => {

					// });
				}
			},
			toBooking() {
				let ids = []


				this.list.some(item => {
					if (item.selected) {
						ids.push(item.id)
					}
				})
				if (ids.length <= 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					});
					return
				}


				this.$api.orderCheckSettlement({
					cartIds: String(ids),
				}, res => {
					if (res.code == 200) {

								uni.navigateTo({
									url: '/pages/product/confirm?cartIds=' + ids
								})
					} else {

						uni.showToast({
							title: res.msg,
							icon: 'none'
						});
					}
				})
			},
			toggleSelectAll: function() {
				var that = this;
				console.log('aaa')
				let ids = []
				let selected = true
				that.list.forEach(function(i) {
					ids.push(i.id)
				});
				if (that.selectAll) {
					selected = false
				} else {
					selected = true
				}


				this.$api.cartUpdateSelected({
					ids: ids,
					selected: selected
				}, res => {
					if (res.code == 200) {
						this.getList()
					}
				})
			},
			countChange(e, item) {
				console.log(e, item, 11111)
				if(e.value==0){
					
					this.$api.cartDelete({
						ids: item.id
					}, res => {
						if (res.code == 200) {
							this.getList()
						}
					})
					
				}else{
					
					this.$api.cartUpdateCount({
						id: item.id,
						count: e.value
					}, res => {
						if (res.code == 200) {
							this.getList()
						}
					})
				}

			},
			checkboxGroupChange: function(e) {
				console.log(e, 3333)
			},
			checkboxChange: function(e) {
				this.$api.cartUpdateSelected({
					ids: e.name,
					selected: e.value
				}, res => {
					if (res.code == 200) {
						this.getList()
					}
				})
			},
			getList: function() {
				var that = this;
				that.$api.cartList({}, res => {
					if (res.code == 200) {
						let total = 0;
						that.selectAll = true
						if(res.data.length<=0){
						that.selectAll = false
						}
						res.data.some(item => {
							if (!item.selected) {
								that.selectAll = false
							}
							if (item.selected) {
								total += item.sku.price * item.count;
							}
						})
						that.total = Number(total).toFixed(2);
						that.list = res.data;
						

					}
				})
			}
		},
		mounted() {

		}
	}
</script>
<style scoped>
	.pageBody {
		padding: 20rpx 0;
		background: #f6f6f6;
	}

	.redtip {
		font-size: 20rpx;
		text-align: left;
		padding-left: 55rpx;
	}

	.u-checkbox-group {

		width: 100%;
	}

	.cartList {
		width: 100%;
	}
	.btn-booking{
		width: 160rpx;
		height: 80rpx;
		text-align: center;
		color: #fff;
		font-size: 28rpx;
		margin-left:40rpx;
		line-height: 80rpx;
		background: #70B52C;
		border-radius: 16rpx;
	}
	.cart-fixed{
		position: fixed;
		bottom: 110px;
		left:0;
		border-top: 1px solid #eee;
		right:0
	}
</style>